<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input
        type="text"
        v-model.trim="addDate.username"
        placeholder="请输入姓名"
      />
    </div>
    <div>
      <span>年龄:</span>
      <input
        type="number"
        v-model.trim="addDate.age"
        placeholder="请输入年龄"
      />
    </div>
    <div>
      <span>性别:</span>
      <select v-model.trim="addDate.gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="addItem()">添加/修改</button>
    </div>
    <div>
      <table border="1" cellpadding="10" cellspacing="0">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.username }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
          <td>
            <button @click="delItem(item.id)">删除</button>
            <button @click="editItem(item)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: JSON.parse(localStorage.getItem("addList")) || [],
      //
      addDate: {
        username: "",
        age: "",
        gender: "",
      },
      itemId: null,
    };
  },
  methods: {
    addItem() {
      // 判断输入框是否为空
      if (
        !this.addDate.username ||
        !this.addDate.age  ||
        !this.addDate.gender
      ) {
        return alert("请输入内容");
      } else {
        // 数组不为空
        // 判断有id 是否在list里面
        if (this.itemId) {
          console.log(this.itemId, 1);
          if (
            !this.addDate.username ||
            !this.addDate.age||
            !this.addDate.gender
          ){
            return alert("请输入内容");
          }else {
            this.list.forEach((item) => {
            if (this.itemId == item.id) {
              (item.username = this.addDate.username),
                (item.age = this.addDate.age),
                (item.gender = this.addDate.gender);
            }
            localStorage.setItem("addList", JSON.stringify(this.list));
          });
          this.addDate = {};
          this.itemId = "";
          }
            
          
          // console.log(this.itemId);
        } else {
          // console.log(111);
          this.list.push({
            username: this.addDate.username,
            age: this.addDate.age,
            gender: this.addDate.gender,
            id: this.list.length ? this.list.at(-1).id + 1 : 1,
          });
          this.itemId = "";
          // 添加后清空输入框
          this.addDate = {};
        }
      }
    },
    // 编辑
    editItem(item) {
      this.addDate = {
        username: item.username,
        age: item.age,
        gender: item.gender,
      };
      this.itemId = item.id;
      console.log(this.itemId);
    },
    delItem(id) {
      this.list = this.list.filter((item) => item.id != id);
      this.addDate = {};
      this.itemId = "";

    },
  },
  watch: {
    list() {
      localStorage.setItem("addList", JSON.stringify(this.list));
    },
  },
};
</script>

